<template>
  <div class="search">
    <div class="form">
      <!-- <Dropdown
        v-model="store.board.taskType"
        :options="taskTypes"
        style="margin-right: 24px"
        @change="handleTaskTypeChange"
      /> -->
      <!-- <Dropdown
        v-model="store.board.taskCode"
        :options="store.board.taskNames"
        @change="handleTaskCodeChange"
      /> -->
    </div>
    <div class="btn-rest" @click="handleRest">
      <el-icon><Refresh /></el-icon>
      <div class="label">重置</div>
    </div>
  </div>
</template>
<script setup>
import { http } from '@/utils/http'
import { taskTypes } from '@/config/dict.js'
import Dropdown from './Dropdown.vue'

const emits = defineEmits('search')

const { store } = inject('/home')

const handleTaskTypeChange = () => {
  store.getBoardTaskNames()
  store.searchBoard()
}

const handleTaskCodeChange = () => {
  store.searchBoard()
}

const handleRest = () => {
  store.board.taskType = store.task.taskType
  store.board.taskCode = store.task.taskCode

  store.searchBoard()
}
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  .form {
    flex: 1;
  }

  .btn-rest {
    font-size: 12px;
    color: #252a30;
    display: flex;
    align-items: center;
    .label {
      margin-left: 4px;
    }
  }
}

:deep(.el-select) {
  --el-input-text-color: var(--primary);
  --el-text-color-placeholder: #252a30;

  .el-select__wrapper {
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
  }
}
</style>
